<template>
  <div class="product-detail">
    <div class="main">
      <Swiper
        :img="imgList"
        :autoplay="1000000"
        :height="337"
        :showIndicatiors="false"
        :showIns="true"
      ></Swiper>
      <div class="fun-btns">
        <span class="back" @click="goBack">
          <img src="/img/62.png" alt />
        </span>
        <span class="share" @click="collectGoods">
          <!-- <img src="/img/63.png" alt /> -->
          <img src="/img/79.png" alt v-if="is_collect"/>
          <img src="/img/80.png" alt v-else/>
        </span>
      </div>
      <div class="product-info">
        <h5 class="product-name">{{ goods.goods_name }}</h5>
        <p class="intro">{{ goods.goods_remark }}</p>
        <div class="product-price">
          <span class="price">
            <span class="price-red pad-r5 pad-origin-price" v-if="origin_price">￥{{ origin_price }}</span>
            <span class="price-red pad-r5">￥{{ price }}</span>
            <span>/{{ goods.weight }}g</span>
          </span>
          <span class="quantity">
            <span class="pad-r5">剩余:</span>
            <span>{{ goods.store_count }}</span>
          </span>
        </div>
      </div>
      <div class="product-adress" v-if="address">
        <span class="adress">
          <span class="pad-r5">送至</span>
          <span class="adress-sel">{{ address?address.address:'' }}</span>
        </span>
        <span class="adress-icon">
          <!-- <img src="/img/50.png" alt /> -->
        </span>
      </div>
      <!-- <div class="recommend-langu">
        <h5 class="recommend-title">推荐语</h5>
        <p class="recommend-content">{{recommend.content}}</p>
      </div> -->
      <div class="recommend-langu" v-if="prom_info&&prom_info.buy_limit">
        <h5 class="recommend-title">限购</h5>
        <p class="recommend-content">每人限购{{prom_info.buy_limit}}件</p>
      </div>
      <div class="product-det">
        <div class="product-det-title">
          <span>商品详情</span>
        </div>
        <div class="detail" v-html="goods.goods_content"></div>
        <!-- <div>
          <span class="pad-r5">品牌:</span>
          <span class="col-b">{{product.brand}}</span>
        </div>
        <div>
          <span class="pad-r5">规格:</span>
          <span class="col-b">{{product.size}}</span>
        </div>
        <div>
          <span class="pad-r5">重量:</span>
          <span class="col-b">{{product.weight}}</span>
        </div>
        <div>
          <span class="pad-r5">产地:</span>
          <span class="col-b">{{product.origin}}</span>
        </div> -->
      </div>
    </div>
    <div class="submit_bar" v-if="from!='oldVip'">
      <router-link to="/m/enter/cart" class="heji">
        <img src="/img/4.png" alt />
        <i class="cart_num" v-if="goods.cart_info&&goods.cart_info.goods_num>0">{{goods.cart_info.goods_num}}</i>
      </router-link>
      <div class="go_js" @click="addCart">加入购物车</div>
    </div>
  </div>
</template>

<script>
import { Swipe, SwipeItem, ImagePreview, SubmitBar } from "vant";
import Swiper from "@/components/swiper";
Vue.use(ImagePreview)
  .use(Swipe)
  .use(SwipeItem)
  .use(SubmitBar);
export default {
  data() {
    return {
      recommend: {
        content: "qdqwhdiuqhduqhduiqgdiuqgwqdiugduqigwdui"
      },
      goods: {},
      goods_attr_list: {},
      goods_attribute: {},
      goods_collect_count: {},
      goods_images_list: [],
      is_collect: 0,
      point_rate: 0,
      prom_info: undefined,
    };
  },
  components: { Swiper },
  mounted(){
    this.getData()
  },
  methods: {
    goBack() {
      window.history.length > 1 ? this.$router.go(-1) : this.$router.push("/");
    },
    getData(){
      this.$store.dispatch('goodsInfo', {
        id: this.goodsId
      }).then(res => {
        var d = res.data.result
        this.goods = d.goods
        this.goods_attr_list = d.goods_attr_list
        this.goods_attribute = d.goods_attribute
        this.goods_collect_count = d.goods_collect_count
        this.goods_images_list = d.goods_images_list
        this.is_collect = d.is_collect
        this.point_rate = d.point_rate
        this.prom_info = d.prom_info
      }).catch(e => {

      })
    },
    addCart(){
      this.$store.dispatch('add2Cart', {
        goods_id: this.goodsId,
        goods_num: 1
      }).then(res => {
        this.goods.cart_info.goods_num++
      }).catch(e => {
        
      })
    },
    collectGoods(){
      this.$store.dispatch('collect_goods',{
        goods_id: this.goodsId,
        collect: this.is_collect ? 0 : 1,
      }).then(res => {
        this.is_collect = this.is_collect ? 0 : 1
      }).catch(e=>{

      })
    }
  },
  computed:{
    goodsId(){
      return this.$route.query.id || 0
    },
    imgList(){
      if(this.goods_images_list.length > 0) {
        var d = []
        for (let index = 0; index < this.goods_images_list.length; index++) {
          const element = this.goods_images_list[index];
          d.push(element.image_url)
        }
        return d
      }else{
        return []
      }
    },
    from(){
      return this.$route.query.from || ''
    },
    price(){
      if(this.prom_info && this.prom_info.shop_price) {
        return this.prom_info.shop_price
      }
      return this.goods.shop_price || ''
    },
    origin_price(){
      if(this.prom_info && this.prom_info.shop_price) {
        return this.goods.shop_price
      }
      return false
    }
  },
  watch:{
    goodsId(){
      this.getData()
    }
  }
};
</script>

<style lang="less">
@import "./product-detail.less";
.submit_bar {
  display: flex;
  align-items: center;
  position: fixed;
  padding-left: 25px;
  bottom: 0px;
  width: 375px;
  height: 53px;
  box-sizing: border-box;
  background: rgba(255, 255, 255, 1);
  // box-shadow: 0px -2px 4px 0px rgba(0, 0, 0, 0.18);
  z-index: 999;
  .heji {
    flex: 1;
    margin-left: 50px;
    img {
      height: 23px;
    }
  }
  .go_js {
    width: 188px;
    height: 53px;
    line-height: 53px;
    text-align: center;
    background: linear-gradient(
      90deg,
      rgba(1, 47, 64, 1) 0%,
      rgba(1, 47, 64, 1) 100%
    );
    font-size: 15px;
    font-family: PingFangSC-Regular;
    font-weight: 400;
    color: rgba(255, 255, 255, 1);
    float: right;
  }  
}
.pad-origin-price{
  text-decoration: line-through;
  color: gray !important;
}
</style>
